import React, { Component } from 'react'
import { getSwiper, getGroups, getNews } from '../../api/home'
import styles from './index.module.scss'
import { Carousel, Flex, Grid, WingBlank } from 'antd-mobile'
import { Link } from 'react-router-dom'
import SearchBar from '../../components/SearchBar'
import { getCurrentCity } from '../../utils/city'
// 以模块的方式，加载本地图片
import image1 from '../../assets/images/nav-1.png'
import image2 from '../../assets/images/nav-2.png'
import image3 from '../../assets/images/nav-3.png'
import image4 from '../../assets/images/nav-4.png'

export default class Home extends Component {
    constructor() {
        super()
        this.state = {
            imgHeight: 212, // 轮播图图片高度
            swiper: null, // 轮播图数据
            groups: null, // 租房小组数据
            news: null, // 资讯资讯
            cityName: '深圳' // 定位的城市名
        }
    }
    // 定义的实例属性
    navs = [
        { icon: image1, text: '整租', path: '/layout/houselist' },
        { icon: image2, text: '合租', path: '/layout/houselist' },
        { icon: image3, text: '地图找房', path: '/map' },
        { icon: image4, text: '去出租', path: '/rent/add' }
    ]

    async componentDidMount() {
        // 获取当前城市名
        const { label } = await getCurrentCity()
        this.setState({
            cityName: label
        })
        // 获取轮播图数据
        this.getSwiperData()
        // 获取租房小组数据
        this.getGroupsData()
        // 获取最新资讯
        this.getNewsData()
    }
    getSwiperData = async () => {
        const res = await getSwiper()
        // console.log(res.data)
        this.setState({
            swiper: res.data.body
        })
    }
    getGroupsData = async () => {
        const res = await getGroups()
        this.setState({
            groups: res.data.body
        })
    }
    getNewsData = async () => {
        const res = await getNews()
        this.setState({
            news: res.data.body
        })
    }
    renderSwiper = () => {
        return (
            <Carousel autoplay infinite>
                {this.state.swiper.map(item => {
                    return (
                        <a
                            key={item.id}
                            href='http://www.alipay.com'
                            style={{
                                display: 'inline-block',
                                width: '100%',
                                height: this.state.imgHeight
                            }}
                        >
                            <img
                                src={`${process.env.REACT_APP_BASEURL}${item.imgSrc}`}
                                alt=''
                                style={{ width: '100%', verticalAlign: 'top' }}
                                onLoad={() => {
                                    // fire window resize event to change height
                                    window.dispatchEvent(new Event('resize'))
                                    this.setState({ imgHeight: 'auto' })
                                }}
                            />
                        </a>
                    )
                })}
            </Carousel>
        )
    }
    renderNav = () => {
        return (
            <Flex className={styles.nav}>
                {this.navs.map(item => {
                    return (

                        <Flex.Item key={item.text}>
                            <Link to={item.path}>
                                <img src={item.icon} alt="" />
                                <p>{item.text}</p>
                            </Link>
                        </Flex.Item>
                    )
                })}
            </Flex>
        )
    }
    renderGroups = () => {
        return (<div className={styles.groups}>
            <Flex>
                <Flex.Item style={{ fontSize: 18, fontWeight: 'bold' }}>租房小组</Flex.Item>
                <Flex.Item align='end'>更多</Flex.Item>
            </Flex>
            <Grid
                data={this.state.groups}
                columnNum={2}
                hasLine={false}
                square={false}
                renderItem={dataItem => (
                    <div className={styles.navItem}>
                        <div className={styles.left}>
                            <p>{dataItem.title}</p>
                            <p>{dataItem.desc}</p>
                        </div>
                        <div className={styles.right}>
                            <img
                                src={`${process.env.REACT_APP_BASEURL}${dataItem.imgSrc}`}
                                alt=""
                            />
                        </div>
                    </div>
                )}
            />
        </div>
        )
    }
    renderNews = () => {
        return (
            <div className={styles.news}>
                <h3 className={styles.groupTitle}>最新资讯</h3>
                <WingBlank size="md">
                    {this.state.news.map(item => {
                        return (
                            <div key={item.id} className={styles.newsItem}>
                                <div className={styles.imgWrap}>
                                    <img src={`${process.env.REACT_APP_BASEURL}${item.imgSrc}`} alt="" />
                                </div>
                                <Flex className={styles.content} direction="column" justify="between">
                                    <h3 className={styles.title}>{item.title}</h3>
                                    <Flex className={styles.info} justify="between">
                                        <span>{item.from}</span>
                                        <span>{item.date}</span>
                                    </Flex>
                                </Flex>
                            </div>
                        )
                    })}
                </WingBlank>
            </div>
        )
    }
    render() {
        const { swiper, groups, news, cityName } = this.state
        return (
            <div className={styles.root}>
                {/* 搜索条 */}
                <SearchBar cityName={cityName} />
                {/* 渲染轮播图 */}
                {swiper && this.renderSwiper()}
                {/* 渲染Nav */}
                {this.renderNav()}
                {/* 渲染租房小组 */}
                {groups && this.renderGroups()}
                {/* 渲染最新资讯 */}
                {news && this.renderNews()}
            </div>
        )
    }
}
